<template>
  <div class="vehicle-detail">
    <wallet-title :title="searchTitle" />
    <!-- 轮播 -->
    <msite-swiper :listData="swiperList" />
    <!-- 容量 -->
    <div class="detail-capacity">
      <!-- 价格 -->
      <div class="price">
        <div class="discount">{{listData.dailyPrice}}</div>
        <div class="origin-price">{{parseInt(listData.dailyPrice)+40}}</div>
      </div>
      <!-- 品牌 -->
      <div class="brand">
        <div class="brand-left">
          <div>{{listData.name}}</div>
          <div>{{listData.seatsNum}}系</div>
          <div>{{listData.engineModel}}T</div>
          <span>{{listData.gearType}}</span>
        </div>
        <div class="brand-right">
          <div>已租25次</div>
        </div>
      </div>
      <!-- 条件 -->
      <div class="condition">
        <div class="condition-left">
          <div>清明2天起租</div>
          <div>消毒送取</div>
          <div>里程优选</div>
          <div>信用双免</div>
        </div>
        <div class="condition-right">
          <van-icon name="arrow"></van-icon>
        </div>
        <div class="condition-bottom">
          <div>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
            <span>{{listData.licenseNum}}</span>
          </div>
          <div>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
            <span>4年车龄</span>
          </div>
          <div>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
            <span>日均限300km</span>
          </div>
          <div>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
            <span>清明节2天起租</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务 -->
    <div class="detail-service">
      <div class="service-left">
        <div>保障服务</div>
        <span>限时折扣</span>
        <div>租期>=7天，保障服务费8折起</div>
      </div>
      <div class="service-right">
        <van-icon name="arrow"></van-icon>
      </div>
    </div>
    <!-- 地址 -->
    <LTextRarrow icon="#icon-daohangdizhi" text="广州市天河区XXX路X号" distance="6.0km" icon2="arrow" />
    <LTextRarrow icon="#icon-fuwu" text="上门取送服务" distance="专业验车、按时送达" icon2="arrow" />
    <LTextRarrow class="pingjia" text="5.0分" distance="暂无评价" icon2="arrow" />

    <!-- 留言 -->
    <div class="detail-message">
      <div class="message-top">
        <div class="message-left">
          <img :src="message.imgSrc" alt="">
          <div>
            <h3>{{message.name}}</h3>
            <p>{{message.intro}}</p>
          </div>
        </div>
        <div class="message-right">
          <van-icon name="comment-o"></van-icon>
          <p>{{message.text}}</p>
        </div>
      </div>
      <div class="message-bottom">
        <div>{{message.content}}</div>
      </div>
    </div>

    <!-- 配置 -->
    <div class="detail-config">
      <LTextRarrow text="车辆配置" distance="全部" icon2="arrow" />
      <div class="config-bottom">
        <div class="config-box">
          <div v-for="(item, index) in configList.introduce" :key="index">
            <h4>{{item.title}}</h4>
            <p>{{item.content}}</p>
          </div>
        </div>
        <div class="config-box2">
          <div v-for="(item2,index2) in configList.introduce2" :key="index2">
            <svg class="icon svg-icon" aria-hidden="true">
              <use :xlink:href="item2.svg"></use>
            </svg>
            <p>{{item2.text}}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 基础服务 -->
    <div class="detail-basis">
      <LTextRarrow text="基础服务" distance="105/天" icon2="arrow" />
      <!-- 高额度保障 -->
      <div class="baozhang">
        <div v-for="(item,index) in basisList" :key="index">
          <svg class="icon svg-icon" aria-hidden="true">
            <use :xlink:href="item.svg"></use>
          </svg>
          <p>{{item.text}}</p>
        </div>
      </div>
      <LTextRarrow text="车辆评价(5.0分)" distance="暂无评价" icon2="arrow" />
      <LTextRarrow text="交接车指南" distance="查看详情" icon2="arrow" />
      <LTextRarrow text="联系客服" distance="有问题点这里" icon2="arrow" />
    </div>

    <DetailsFooterGuide :collection="collectionList" />
  </div>
</template>
<script>
import MsiteSwiper from '../MsiteSwiper.vue'
import LTextRarrow from '../../common/LTextRarrow.vue'
import DetailsFooterGuide from './DetailsFooterGuide.vue'
import WalletTitle from '../../common/WalletTitle.vue'
import { getSwiperList } from '../../../api'
export default {
  components: { MsiteSwiper, LTextRarrow, DetailsFooterGuide, WalletTitle },
  name: 'vehicleDetail',
  data() {
    return {
      active: 0,
      recommendList: [
        {
          src: 'https://img.yzcdn.cn/vant/cat.jpeg',
          title: '宝马',
          title2: '3系',
          capacity: '1.5L',
          icon: 'star',
          pingfen: '5.0',
          num: '粤R00031',
          price: '108',
          price2: '108'
        }
      ],
      message: {
        imgSrc: 'https://img.yzcdn.cn/vant/cat.jpeg',
        name: 'Miss.杨',
        intro: '60%接单率',
        text: '给它留言',
        content: '开宝马一时爽，一直开宝马一直爽！车子是否可租再下单，更接近18年的车子，17款320L运动外套；B48的机子省油动力强劲，长轴版3系F35车系，车长4米6轴距有2米92 后排空间十分宽敞开宝马一时爽，一直开宝马一直爽！车子是否可租再下单，'
      },
      configList: {
        introduce: [
          {
            title: '车龄',
            content: '4年'
          },
          {
            title: '排量',
            content: '2.0T'
          },
          {
            title: '动力：汽油',
            content: '98号汽油'
          },
          {
            title: '油箱容量',
            content: '60L'
          },
          {
            title: '座椅',
            content: '5位'
          }
        ],
        introduce2: [
          {
            svg: '#icon-ditu',
            text: '倒车影像'
          },{
            svg: '#icon-icon_quanjingtianchuang',
            text: '天窗'
          },{
            svg: '#icon-yingxiangdaiban',
            text: '导航仪'
          },{
            svg: '#icon-zuoyi-',
            text: '真皮座椅'
          }
        ]
      },
      basisList: [
        {
          svg: '#icon-anquanbaozhang-xianxing',
          text: '高度额保障'
        },
        {
          svg: '#icon-daolujingshi',
          text: '7x24h道路救援'
        },
        {
          svg: '#icon-lipeifangbian-04',
          text: '一键理赔'
        }
      ],
      searchTitle: '车辆详情',
      swiperList: [],
      listData: {},
      collectionList: {}
    }
  },
  mounted() {
    this.getSwiperList();
    this.listData = this.$route.query;
    this.collectionList = this.listData;
  },
  methods: {
    getSwiperList() {
      getSwiperList().then(res => {
        this.swiperList = res.data.data;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.vehicle-detail {
  width: 100%;
  height: 100%;
  background-color: #fff;
  // 标题
  .wallet-detail /deep/ {
    .wallet-title {
      border: none;
    }
  }
  // 容量
  .detail-capacity {
    width: 100%;
    .price {
      display: flex;
      justify-content: flex-start;
      align-items: flex-end;
      padding-top: 15px;
      // 打折
      .discount {
        font-size: 18px;
        font-weight: bold;
        &::before {
          content: '￥';
          font-size: 14px;
          font-weight: 400;
        }
        &::after {
          content: '/天';
          font-size: 12px;
          font-weight: 400;
        }
      }
      // 原价
      .origin-price {
        font-size: 10px;
        color: #666;
        text-decoration: line-through;
        margin-left: 8px;
        &::before {
          content: '原价￥';
        }
        &::after {
          content: '/天';
        }
      }
    }
    // 品牌
    .brand {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      font-size: 18px;
      .brand-left {
        width: 70%;
        display: flex;
        align-items: center;
        div {
          font-weight: 700;
          margin: 0 6px;
        }
      }
      .brand-right {
        width: 46%;
        div {
          text-align: right;
          font-weight: 400;
          font-size: 12px;
          color: #666;
          margin-right: 10px;
        }
      }
      span {
        width: 40px;
        height: 16px;
        line-height: 14px;
        border: 2px solid #666;
        border-radius: 4px;
        text-align: center;
        font-size: 12px;
        color: #666;
        margin-left: 10px;
      }
    }
    // 条件
    .condition {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      margin: 10px 0;
      .condition-left {
        width: 80%;
        display: flex;
        justify-content: space-around;
        div {
          font-size: 12px;
          border-radius: 4px;
          padding: 2px;
          &:nth-of-type(1), &:nth-of-type(2) {
            color: $color;
            border: 2px solid $color;
          }
          &:nth-of-type(3), &:nth-of-type(4) {
            color: #666;
            border: 2px solid #666;
          }
        }
      }
      .condition-right {
        width: 15%;
        text-align: right;
      }
      .condition-bottom {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin: 10px 0;
        div {
          color: #888;
          font-size: 10px;
          margin-left: 12px;
        }
      }
    }
  }
  // 保障服务
  .detail-service {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    border: 4px solid $bgcolor;
    overflow-x: hidden;
    box-sizing: border-box;
    .service-left {
      width: 80%;
      display: flex;
      justify-content: space-between;
      div {
        &:nth-of-type(1) {
          // font-size: 14px;
          font-weight: 700;
        }
        &:nth-of-type(2) {
          font-size: 10px;
          color: #666;
        }
      }
      span {
        height: 20px;
        line-height: 20px;
        font-size: 10px;
        color: #fff;
        background-color: $color;
        border-radius: 4px;
        padding: 2px;
        margin-top: 15px;
      }
    }
    .service-right {
      width: 10%;
      text-align: center;
    }
  }
  // 评价
  .pingjia /deep/ {
    .text-left {
      color: $color;
      font-weight: 700;
    }
  }
  // 留言
  .detail-message {
    width: 100%;
    height: $height*5.5;
    background-color: #fff;
    margin-top: 20px;
    padding: 0 15px;
    box-sizing: border-box;
    border-top: 4px solid $bgcolor;
    border-bottom: 4px solid $bgcolor;
    // 主人
    .message-top {
      width: 100%;
      height: $height*2;
      display: flex;
      justify-content: space-between;
      .message-left {
        display: flex;
        align-items: center;
        img {
          width: $height*1.2;
          height: $height*1.2;
          border-radius: 50%;
        }
        div {
          margin-left: 8px;
          p {
            font-size: 14px;
          }
        }
      }
      .message-right {
        text-align: center;
        display: flex;
        flex-flow: column wrap;
        i {
          display: flex;
          height: 50%;
          align-items: flex-end;
          justify-content: center;
          text-align: center;
        }
        p {
          font-size: 14px;
        }
      }
    }
    // 内容
    .message-bottom {
      div {
        margin-top: 10px;
        text-overflow: -o-ellipis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        line-height: 26px;
      }
    }
  }
  // 配置
  .detail-config {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 4px solid $bgcolor;
    .detail-text /deep/ {
      padding-left: 0;
      text-align: left;
      border-bottom: 4px solid #fff;
      .text-left {
        font-weight: 700;
      }
    }
    // .config-top {
    //   width: 100%;
    //   height: $height*1.5;
    //   display: flex;
    //   justify-content: space-between;
    //   margin-top: 10px;
    //   div {
    //     width: 50%;
    //     &:nth-of-type(1) {
    //       font-size: 20px;
    //       font-weight: 700;
    //     }
    //     &:nth-of-type(2) {
    //       width: 16%;
    //       font-size: 14px;
    //       color: #666;
    //       padding-top: 10px;
    //       padding-right: 10px;
    //       box-sizing: border-box;
    //     }
    //   }
    // }
    .config-bottom {
      display: flex;
      justify-content: space-between;
      flex-flow: column wrap;
      .config-box {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        div {
          width: 33%;
          height: $height*1.5;
          padding-left: 6px;
          box-sizing: border-box;
          h4 {
            font-weight: 400;
            font-size: 14px;
          }
          p {
            font-size: 14px;
            font-weight: 700;
          }
        }
      }
      .config-box2 {
        width: 100%;
        height: $height*2;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        text-align: center;
        svg {
          font-size: 24px;
        }
        p {
          padding-top: 10px;
          box-sizing: border-box;
        }
      }
    }
  }
  // 基础服务
  .detail-basis {
    width: 100%;
    margin-bottom: 100px;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    .detail-text {
      border-bottom: 4px solid #fff;
    }
    .baozhang {
      width: 100%;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      div {
        height: $height*2;
        text-align: center;
        box-sizing: border-box;
        svg {
          font-size: 24px;
          color: #222;
        }
        p {
          padding-top: 15px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>